// @ts-nocheck
import React, {useState, useEffect} from 'react';
import {Modal, Form, Input, message, Descriptions, Card, Divider} from 'antd'
import {giftDuration} from '@/services/contract'
import {formatDate} from '@/tools/tool'
import SelectGiftDuration from "@/components/Select/SelectGiftDuration";

const GiftDuration = (props) => {
  const {visible, onOk, onClose, data} = props
  const [form] = Form.useForm()
  const handleOk = () => {
    form.validateFields().then(value => {
      const body = {
        contract_id: data.contract_id,
        date: value.date
      }
      giftDuration(body).then(res => {
        if (res.status === 200) {
          message.success(res.message).then()
          onOk()
          form.resetFields()
        } else {
          message.error('赠送时长失败！').then()
        }
      })
    })
  }
  return (
    <Modal
      destroyOnClose
      title={'赠送时长'}
      visible={visible}
      width={'75vw'}
      maskClosable={false}
      onOk={() => handleOk()}
      onCancel={() => {
        onClose();
        form.resetFields()
      }}
    >
      <Descriptions layout="vertical" bordered column={5} size={'small'}>
        <Descriptions.Item label="联系人">{data.linkman}</Descriptions.Item>
        <Descriptions.Item label="宽带账号">{data.account_number}</Descriptions.Item>
        <Descriptions.Item label="宽带密码">{data.account_password}</Descriptions.Item>
        <Descriptions.Item label="电话">{data.link_telephone}</Descriptions.Item>
        <Descriptions.Item label="套餐">{data.package_name}</Descriptions.Item>
        <Descriptions.Item label="通信地址">{data.detail_address}</Descriptions.Item>
        <Descriptions.Item label="开始时间">{formatDate(data.start_date)}</Descriptions.Item>
        <Descriptions.Item label="结束时间">{formatDate(data.end_date)}</Descriptions.Item>
        <Descriptions.Item label="备注">{data.memo}</Descriptions.Item>
        <Descriptions.Item label="受理人">{data.operator}</Descriptions.Item>
      </Descriptions>
      <Divider>时长周期</Divider>
      <Card size={'small'}>
        <Form form={form} autoComplete="off" labelCol={{span: 2}} wrapperCol={{span: 6}}>
          <Form.Item label="时长周期" name="date" rules={[{required: true, message: '请选择时长周期'}]}>
            <SelectGiftDuration/>
          </Form.Item>
        </Form>
      </Card>

    </Modal>
  );
};

export default GiftDuration;
